{extend name="public/base"}
{block name="body"}
{include file="public/colnav"}
<div class="container">
	<ol class="breadcrumb">
	  <li><a href="#">商城首页</a></li>
	  <li>购物车</li>
	  <li>结算页</li>
	</ol>
	<h4>填写并核对信息</h4>
	<div class="panel panel-default">
		<div class="panel-body">
			<h5><b>收货人信息:</b></h5>
			<!-- 收件人信息 -->
			<div class="consignee-scroll">
				<div class="consignee-conts">
					<ul class="consignee-list">
						<li class="consignee-li">
							<div class="consignee-item selected pull-left">
								<span>收件人</span>
								<b></b>
							</div>
							<div class="consignee-addr pull-left">
								<span class="addr-name">
									柳岩
								</span>
								<span class="addr-info">
									高新区长江路与中华路交界处向东300米路北华建1街区
								</span>
								<span class="addr-tel">
									15224238882
								</span>
							</div>
						</li>
					</ul>
				</div>
			</div>
			<!-- 支付方式 -->
			<h5><b>支付方式:</b></h5>
			<div class="payment">
				<ul class="payment-list">
					<li>
						<div class="payment-item online-payment">					
					    	货到付款
					    	<span class="qmark-icon qmark-tip" data-tips="送货上门后再收款，支持现金、POS机刷卡、支票支付 <a href='//help.jd.com/user/issue/103-983.html' target='_blank' class='ftx-05'>查看服务及配送范围</a>"></span>
					    </div>
					</li>
					<li>
						<div class="payment-item item-selected online-payment">
							<b></b>
					    	在线支付
					    	<span class="qmark-icon qmark-tip" data-tips="送货上门后再收款，支持现金、POS机刷卡、支票支付 <a href='//help.jd.com/user/issue/103-983.html' target='_blank' class='ftx-05'>查看服务及配送范围</a>"></span>
					    </div>
					</li>
				</ul>
			</div>
			<div class="clearfix"></div>
			<!-- 配货方式及清单 -->
			<h5><b>送货清单:</b></h5>
			<div class="shopping-lists">
				<div class="shopping-list-conts">
					<div class="dis-mod">
						<strong>配送方式</strong>
						<ul style="margin-top: 10px;">
							<li class="mode-tab-item curr">
								<span class="m-txt">同城快递<i class="qmark-icon qmark-tip" data-tips="由本公司负责配送，速度很快，还接受上门刷卡付款服务"></i></span>
								<b></b>
	                        </li>
	                        <li class="mode-tab-item" onclick="doSwithTab(this)">
								<span class="m-txt">三小时急速<i class="qmark-icon qmark-tip" data-tips="由本公司负责配送，速度很快，还接受上门刷卡付款服务"></i></span>
	                        </li>
						</ul>
						<div class="clearfix"></div>
						<p>
							<span>付款方式:</span>现金
						</p>
						<p>
							<span>配送时间:</span>工作日、双休日与节假日均可送货
						</p>
					</div>
					<div class="shopping-goods-list">
						<strong>购买商品</strong>
						<div class="goods-lists-mod">
							<div class="goods-list-item">
								<div class="media">
								  <div class="media-left">
								    <a href="#">
								      <img class="media-object" src="static/images/m01.jpg" alt="商品的简介" width="80px" height="80px">
								    </a>
								  </div>
								  <div class="media-body">
								    <div class="media-heading">OPPO R11 全网通4G+64G 双卡双待手机 玫瑰金色</div>
								    <span class="glyphicon glyphicon-search" aria-hidden="true"></span>支持7天无理由退货
								  </div>
								</div>
								<div class="cart-price-2">
									<strong>¥2999</strong>
								</div>
								<div class="cart-count-2">
									<em>x</em><i>2</i>
								</div>
								<div class="cart-stock-2">
									有货
								</div>
							</div>
							<div class="goods-list-item">
								<div class="media">
								  <div class="media-left">
								    <a href="#">
								      <img class="media-object" src="static/images/m01.jpg" alt="商品的简介" width="80px" height="80px">
								    </a>
								  </div>
								  <div class="media-body">
								    <div class="media-heading">OPPO R11 全网通4G+64G 双卡双待手机 玫瑰金色</div>
								    <span class="glyphicon glyphicon-search" aria-hidden="true"></span>支持7天无理由退货
								  </div>
								</div>
								<div class="cart-price-2">
									<strong>¥2999</strong>
								</div>
								<div class="cart-count-2">
									<em>x</em><i>2</i>
								</div>
								<div class="cart-stock-2">
									有货
								</div>
							</div>
							<div class="goods-list-item">
								<div class="media">
								  <div class="media-left">
								    <a href="#">
								      <img class="media-object" src="static/images/m01.jpg" alt="商品的简介" width="80px" height="80px">
								    </a>
								  </div>
								  <div class="media-body">
								    <div class="media-heading">OPPO R11 全网通4G+64G 双卡双待手机 玫瑰金色</div>
								    <span class="glyphicon glyphicon-search" aria-hidden="true"></span>支持7天无理由退货
								  </div>
								</div>
								<div class="cart-price-2">
									<strong>¥2999</strong>
								</div>
								<div class="cart-count-2">
									<em>x</em><i>2</i>
								</div>
								<div class="cart-stock-2">
									有货
								</div>
							</div>
							<div class="goods-list-item">
								<div class="media">
								  <div class="media-left">
								    <a href="#">
								      <img class="media-object" src="static/images/m01.jpg" alt="商品的简介" width="80px" height="80px">
								    </a>
								  </div>
								  <div class="media-body">
								    <div class="media-heading">OPPO R11 全网通4G+64G 双卡双待手机 玫瑰金色</div>
								    <span class="glyphicon glyphicon-search" aria-hidden="true"></span>支持7天无理由退货
								  </div>
								</div>
								<div class="cart-price-2">
									<strong>¥2999</strong>
								</div>
								<div class="cart-count-2">
									<em>x</em><i>2</i>
								</div>
								<div class="cart-stock-2">
									有货
								</div>
							</div>
						</div>
					</div>
					
				</div>
			</div>
			<div class="clearfix"></div>
			<!-- 备注说明 -->
			<h5><b>备注:</b></h5>
			<input type="text" class="form-control" name="goback" placeholder="输入想要对商品的备注">			
		</div>
	</div>
	<!-- 商品金额 -->
	<div class="mod-price-tot pull-right">
		<div class="list">
            <span><em class="ftx-01">4</em> 件商品，总商品金额：</span>
            <em class="price" id="warePriceId" v="171.6">￥171.60</em>
        </div>
        <div class="list">
            <span>运费：</span>
            <em class="price" id="postPriceId" v="15.00">￥15.00</em>
        </div>
	</div>
	<div class="clearfix"></div>
	<div class="well price-sum">
		<div class="fc-price-info">
          <span class="price-tit">应付总额：</span>
          <span class="price-num" id="sumPayPriceId">￥158.20</span>
        </div>
		<div class="fc-consignee-info">
          <span class="mr20" id="sendAddr">寄送至： 山东 聊城市 东昌府区 新区街道  高新区长江路与中华路交界处向东300米路北华建1街区</span>
          <span id="sendMobile">收货人：刘燕 152****8882</span>
        </div>
    </div>
	<a href="{:url('/order')}" class="btn btn-danger pull-right submit-order">提交订单</a>
</div>
{/block}
{block name="jsRes"}
<script>
	$('.online-payment').on('mouseenter', function(e) {
		$(this).addClass('payment-item-hover');
	}).on('mouseleave',function(e){
		$(this).removeClass('payment-item-hover');
	}).on('click',function(e){
		$('.online-payment').removeClass('item-selected').find('b').remove();
		$(this).addClass('item-selected').append('<b></b>');
	});
	$('.mode-tab-item').click(function(e) {
		/* Act on the event */
		$(this).siblings('li').removeClass('curr').find('b').remove();
		$(this).addClass('curr').append('<b></b>');
	});
</script>
{/block}